<style scoped>
    .btn-block {
        height: 70px;
        line-height: 70px;
        padding-left: 80px;
        border-top: 1px solid #eee;
    }

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div>
                <div @click="$router.back()" class="back-btn">
                    <Icon type="ios-arrow-back"/>
                </div>
                <a @click="$router.back()">考勤组管理</a> / {{$route.query.id? '编辑': '新增'}}
            </div>
        </div>
        <div class="page-content" style="height: calc(100% - 50px);">

            <div class="content-block bg-white p-20" style="padding-right: 100px">

                <template>

                    <div class="m-b-10">
                        <div class="top-title-text black blod">基础信息</div>
                        <div class="p-10-0">
                            <div class="flex-c">
                                <div class="w30p flex-c">
                                    <div class="w100"> 考勤组名称 <span class="red">*</span></div>
                                    <Input v-model="detail.source_type" placeholder="请输入" class="w240"></Input>
                                </div>
                                <div class="w30p flex-c">
                                    <div class="w100"> 考勤区域 <span class="red">*</span></div>
                                    <Select v-model="detail.wl_mc" @on-change="changeArea" class="w240"placeholder="请选择" filterable clearable transfer>
                                        <Option v-for="(item,i) in areaList"
                                                :key="i"
                                                :value="item.wl_mc"
                                        >{{item.wl_mc}}</Option>
                                    </Select>
                                </div>
                                <div class="w30p flex-c">
                                    <div class="w100"> 考勤负责人 <span class="red">*</span></div>
                                    <Select v-model="detail.wl_fzr" class="w240"placeholder="请选择" filterable clearable transfer>
                                        <Option v-for="(item,i) in userList"
                                                :key="i"
                                                :value="item.user_name"
                                        >{{item.user_name}}-{{item.phone_num}}</Option>
                                    </Select>
                                </div>
                            </div>
                        </div>
                        <!--<div class="p-10-0">-->
                            <!--<div class="flex-c">-->
                                <!--<div class="flex-c">-->
                                    <!--<div class="w100"> 参加考勤人员 <span class="red">*</span></div>-->
                                    <!--<Select v-model="detail.role_id" class="w240"placeholder="请选择" clearable transfer>-->
                                        <!--<Option v-for="(item,i) in roleList"-->
                                                <!--:key="i"-->
                                                <!--:value="item.id"-->
                                        <!--&gt;{{item.role_name}}</Option>-->
                                        <!--<Option value="2">业务人员</Option>-->
                                    <!--</Select>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>


                    <div class="">
                        <div class="top-title-text black blod">考勤班次</div>
                        <div class="p-10-0 w60p">

                            <Table :columns="columns"
                                   :data="kaoqinList"
                            >
                            </Table>


                        </div>
                    </div>

                </template>

                <div class="btn-block">
                    <Button @click="$router.back()" class="m-r-10">取消</Button>
                    <Button @click="confirm" type="primary">提交</Button>
                </div>

            </div>
        </div>

        <Modal v-model="itemModal"
               title="考勤详情"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20">

                <div class="p-15-0" style="height: 500px;overflow: auto">
                    <div class="top-title-text text-18 black blod">考勤班次信息</div>
                    <Form>

                        <Row>
                            <Col span="22">
                                <FormItem label="考勤班次" required>
                                    <Select v-model="itemData.wl_fzr" class="w240"placeholder="请选择" filterable clearable transfer>
                                        <Option v-for="(item,i) in banciList"
                                                :key="i"
                                                :value="item.bc_mc"
                                        >{{item.bc_mc}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div class="top-title-text text-18 black blod m-b-10">考勤人员</div>

                    <Transfer
                            :data="userList"
                            :target-keys="targetList"
                            :list-style="listStyle"
                            :render-format="render3"
                            :operations="['取消','添加']"
                            :titles="['机构人员','考勤人员']"
                            filterable
                            @on-change="handleKaoqin"
                    >
                        <!--<div :style="{float: 'right', margin: '5px'}">-->
                            <!--<Button size="small"></Button>-->
                        <!--</div>-->
                    </Transfer>
                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                detail: {},
                areaList: [],
                userList: [],
                banciList: [],


                columns: [
                    {
                        type: 'selection',
                        width: 60,
                    },
                    {
                        title: '工作日',
                        width: 100,
                        key: 'gzr',
                    },
                    {
                        title: '班次',
                        key: 'bc'
                    },
                    {
                        title: '操作',
                        width: 120,
                        render: (h, params) => {
                            let look = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('查看', params.row);

                                        this.itemData = params.row;
                                        this.itemModal = true;
                                    }
                                }
                            }, '详情');
                            let edit = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        this.itemData = params.row;
                                        this.itemModal = true;
                                    }
                                }
                            }, '更改');
                            return h('div', [look,edit,  ]);
                        }
                    },
                ],
                kaoqinList: [
                    {
                        gzr: '周一',
                        bc: '班次01、班次02',
                    },
                    {
                        gzr: '周二',
                        bc: '班次01、班次02',
                    },
                    {
                        gzr: '周三',
                        bc: '班次01、班次02',
                    },
                    {
                        gzr: '周四',
                        bc: '班次01、班次02',
                    },
                    {
                        gzr: '周五',
                        bc: '班次01、班次02',
                    },
                    {
                        gzr: '周六',
                        bc: '休息',
                    },
                    {
                        gzr: '周日',
                        bc: '休息',
                    },
                ],

                listStyle: {
                    width: '250px',
                    height: '300px'
                },
                targetList: [],



                itemModal: false,
                itemData: '',
            }
        },
        created() {
            this.getBanciList();
            this.getAreaList();
            this.getUserList();
        },
        methods: {
            changeArea(e) {
                console.log('修改区域', e);
                let area = this.areaList.find(v => v.wl_mc === e);
                if(area) {
                    this.detail.wl_fzr = area.wl_fzr
                }


            },
            render3 (item) {
                return item.label + ' - ' + item.description;
            },
            handleKaoqin(list) {
                this.targetList = list;
            },
            getBanciList() {

                let postData = {
                    pageSize: 100,
                    pageNum: 1,
                    // bc_mc: this.search.str,
                };

                // if(this.search.timeArr.length) {
                //     if(this.search.timeArr[0]) {
                //         postData.startDate = moment(this.search.timeArr[0]).format('YYYY-MM-DD 00:00:00')
                //     }
                //     if(this.search.timeArr[1]) {
                //         postData.endDate = moment(this.search.timeArr[1]).format('YYYY-MM-DD 23:59:59')
                //     }
                // }

                this.util.get('/hand/bcLists', postData).then(res => {
                    console.log('获取班次列表', JSON.parse(JSON.stringify(res)))
                    res.data.forEach(v => {
                        v.sxbCs = v.sxb_cs + ' 次上下班'
                    })
                    this.banciList = res.data || [];

                })
            },
            getAreaList() {

                let postData = {

                };

                this.util.get('/hand/wlLists', postData).then(res => {
                    console.log('获取围栏列表', JSON.parse(JSON.stringify(res)))
                    this.areaList = res.data || [];
                })

            },

            getUserList() {

                let postData = {
                    // orId: this.detailId,
                };
                this.util.get('/hand/userAccountLists', postData).then(res => {
                    console.log('获取机构人员', JSON.parse(JSON.stringify(res)))
                    res.data && res.data.forEach(v => {
                        v.state = v.status === 'T'

                        v.label = v.user_name;
                        v.description = v.phone_num;
                        v.key = v.id;
                    })
                    this.userList = res.data || []

                    this.targetList = this.userList.slice(0, 3).map(v => v.id)
                })
            },

            getDetail() {

                let url = {
                    案件来源表: '/management/getCaseSource',
                    立案表: '/management/getPutOnRecord',
                    案件处理意见报告: '/management/getCaseReport',
                    行政处罚结案报告: '/management/getPunishReport',
                    行政处罚回执: '/management/getPunishReturn',
                    约谈申请表及通知书: '/management/getTalkNotificationInf',
                    约谈笔录: '/management/getTalkNoteInf',
                }[this.type]
                let key = {
                    案件来源表: 'cs_id',
                    立案表: 'put_id',
                    案件处理意见报告: 'cr_id',
                    行政处罚结案报告: 'pr_id',
                    行政处罚回执: 'pr_id',
                    约谈申请表及通知书: 't_id',
                    约谈笔录: 't_id',
                }[this.type]

                let postData = {
                    [key]: this.$route.query.id
                };

                this.util.get(url, postData, 'formdata').then(res => {
                    console.log('案例获取', JSON.parse(JSON.stringify(res)))
                    let detail = res.data || [];

                    if (detail.attachment) {
                        this.fileList = detail.attachment.split(',')
                    }

                    console.log('详情', JSON.parse(JSON.stringify(detail)))

                    this.detail = detail;
                })
            },
            confirm() {
                this.itemModal = false;
                return
                let detail = this.detail;

                if (!detail.template_id) {
                    this.$Message.warning('请选择模板')
                    return;
                }

                let postData = this.detail;
                postData.attachment = this.fileList.join();

                if (postData.regist_date) {
                    postData.regist_date = moment(postData.regist_date).format('YYYY-MM-DD HH:mm:ss')
                }
                if (postData.sent_date) {
                    postData.sent_date = moment(postData.sent_date).format('YYYY-MM-DD HH:mm:ss')
                }
                if (postData.talk_date) {
                    postData.talk_date = moment(postData.talk_date).format('YYYY-MM-DD HH:mm:ss')
                }

                let url = {
                    案件来源表: '/management/editCaseSource',
                    立案表: '/management/editPuton',
                    案件处理意见报告: '/management/editCaseReport',
                    行政处罚结案报告: '/management/editPunishReport',
                    行政处罚回执: '/management/editPunishReturn',
                    约谈申请表及通知书: '/management/editNotificationInf',
                    约谈笔录: '/management/editTalkNoteInf',
                }[this.type]

                if (!url) {
                    this.$Message.warning('没有当前类型模板')
                    return
                }

                this.util.post(url, postData).then(res => {
                    if (res.status == 200) {
                        this.$Message.success(res.msg);
                        this.$router.back();
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },
        },
    }
</script>

